<script setup lang="ts">
import myTopic from "@/composables/myTopic.ts";
import dayjs from "dayjs";
const {topics,getTopics,adminDelTopic} = myTopic();
await getTopics();

const columns = [
  {id:'id',label:'ID',width:50},
  {id:'cat.title',label:'所属大类',width:120},
  {id:'title',label:'帖子标题',type:'substr'},
  {id:'user.name',label:'作者',width:100},
  {id:'created_at',label:'创建时间',width:120,type:'date'},
  {id:'',label:'操作',type:'buttons',width:160},
]
const searchWords = ref('');
const search = ()=>{
  getTopics(1,{key:"title",keywords:searchWords.value})
}
</script>

<template>
  <main class="topics"  v-if="topics">
    <div class="search">
      <el-input placeholder="请输入搜索内容" v-model="searchWords" @keyup.enter="search()"/>
      <el-button type="primary" @click="search()"><icon-search /></el-button>
    </div>
    <el-card shadow="never" >
      <el-table :data="topics.data" stripe border style="width: 100%" table-layout="fixed">
        <el-table-column align="center"
                         v-for="col in columns"
                         :prop="col.id"
                         :key="col.id"
                         :label="col.label"
                         :width="col.width"
                         #default="{row}"
        >
          <template v-if="col.type=='image'">
            <el-avatar shape="square" :size="80" :src="row[col.id]" fit="scale-down"/>
          </template>
          <template v-if="col.type=='substr'">
            <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{row[col.id]}}</span>
          </template>
          <template v-if="col.type=='date'">
            <span>{{dayjs(row[col.id]).format('YYYY-MM-DD')}}</span>
          </template>
          <template v-if="col.type=='buttons'">
            <el-button-group size="small">
              <el-button type="primary" @click="$router.push({name:'front.topic.show',params:{t_id:row['id']}})">
                <icon-doc-detail />
              </el-button>
              <el-button type="success" @click="$router.push({name:'topic.edit',params:{t_id:row['id']}})">
                <icon-editor /></el-button>
              <el-button type="danger" @click="adminDelTopic(row['id'])"><icon-delete /></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="pages">
      <el-pagination
          :hide-on-single-page="true"
          :page-size="topics.meta.per_page"
          :current-page="topics.meta.current_page"
          background
          layout="prev, pager, next,total"
          :total="topics.meta.total"
          @current-change="getTopics"
      />
    </div>
  </main>
</template>

<style lang="scss" scoped>
main.topics{
  div.search{
    @apply flex justify-start items-center gap-2 w-1/3 p-3;
  }
  div.pages{
    @apply p-3 mt-3 flex justify-end;
  }
}

</style>